.chatcontainer {
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
}
.main{
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    flex-basis: 0%;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box;
    padding: 5px;
}

body > .el-container {
    margin-bottom: 40px;
}

* {
    padding: 0px;
    margin: 0px;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}

html,
body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

button {
    padding: 3px 10px;
}

.p900 {
    padding: 0px calc((100% - 900px) / 2);
}

.m900 {
    width: 900px;
    margin: 0px auto;
}

.flexbtw {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header {
    background-color: #eee;
    flex: none;
}
header > h3 {
    margin: 10px 0px;
}

main {
    flex: auto;
    background-color: #ddd;
}

footer {
    flex: none;
    padding: 5px;
    text-align: center;
    background-color: #eee;
}

aside {
    width: 200px;
    height: 100%;
    background-color: #ccc;
    flex: none;
}

article {
    height: 100%;
    flex: auto;
}

article {
    display: flex;
    flex-direction: column;
}

#msgs {
    height: 380px;
    /* flex: auto; */
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    overflow-y: auto;
    margin-bottom: 20px;
}

#msg {
    flex: none;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
}

.send > * {
    float: right;
}

.recv > * {
    float: left;
}

.send,
.recv {
    clear: both;
    padding: 5px 0px;
}

.user,
.msg {
    padding: 5px;
    align-items: center;
    height: 50px;
    display: flex;
    font-size: 1.5em;

}

.msg {
    background-color: #e9e9e9;
    border-radius: 3px;
}

aside > div {
    text-align: center;
    padding: 10px;
    margin: 3px;
    background-color: #8c939d;
}

aside > div:hover {
    background-color: #8c939d55;
    cursor: pointer;
}

#ops {
    text-align: right;
    padding: 7px;
}
#ops > * {
    box-sizing: border-box;
    height: 25px;
    vertical-align: middle;
    margin: 0px 5px;
    text-align: center;
}
textarea {
    padding: 3px;
}
.uimg {
    display: flex;
    width: 50px;
    height: 50px;
}
.uimg img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%; /* 将图片的边框半径设置为 50%，使其显示为圆形 */
    object-fit: cover; /* 保持图片在圆形区域内完全显示 */
    background-color: rgb(28, 81, 129);
    margin-right: 15px;
}
body .uname p {
    width: 60px;
    /* height: 50px; */
    min-height: 1.2em; /* 设置最小高度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* 使用 inline-block */
}
.main button{
    margin-left: auto;
    margin-right: 5px;
    display: block;
}



















